import React, { useState } from "react";
import { ResultPage, Card } from "antd-mobile";
import styles from "./index.module.css";
import { AddOutline } from "antd-mobile-icons";
import dayjs from "dayjs";
import { Popup, Space, Button, CalendarPickerView } from "antd-mobile";
function Index() {
  // 上面的日期使用useState定义实现，并封装函数实现日期格式转换
  const [date, setDate] = useState(dayjs().format("YYYY-MM-DD"));
  const [visible1, setVisible1] = useState(false);
  return (
    <div>
      <ResultPage status="" title="火车票预订" description="便携购票为你服务">
        <Card>
          <div className={styles.Home_city}>
            <span>北京</span>
            <AddOutline fontSize={20} />
            <span>广州</span>
          </div>
    {/* 2-1、点击首页日期显示日历组件
2-2、日历组件默认选中当前日期 */}
          <div className={styles.Home_TIme}>
            {/* 、点击日历中日期后，将选择的日期转成上面的日期格式渲染在页面中
 */}
            <span onClick={() => setVisible1(true)}>{date}</span>
          </div>

          <div style={{ marginTop: 20 ,marginBottom:20}}>
            <span>高铁/火车</span>
          </div>

          <Button block color="primary" size="large">
          查询车票
          </Button>
        </Card>
      </ResultPage>

      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
        <CalendarPickerView
          // max={dayjs(10,"day")}
          onChange={(val) => {
            setDate(dayjs(val).format("YYYY-MM-DD"));
            // 选择日期后关闭日历
            setVisible1(false);
          }}
        />
      </Popup>
    </div>
  );
}

export default Index;
